import React,{Component} from 'react'

import { Input,Select,Checkbox,Button,Tag ,Tooltip,Icon,DatePicker  } from 'antd';

import Ntable from '../../common/table'

import axios from 'axios'

import {Label} from "../../common/common"
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

import {Link} from 'react-router-dom';
moment.locale('zh-cn');
const Option = Select.Option;
  const data = [{
    key: 0,
    weight:'1',
    sname: '手工藤编脏衣桶家居收纳筐收纳箱小号（白色筐）',
    id:"364920333332",
    mname:"家居小用品类目模板",
    brand:'一宅自营',
    upeople:'阿凡达',
    status:'已上架',
    paytype:'一次付款',
    utime:'2018.02.08  10:02:01'
  }, {
    key: 1,
    weight:'1',
    sname: '手工藤编脏衣桶家居收纳筐收纳箱小号（白色筐）',
    id:"364920333332",
    mname:"家居小用品类目模板",
    brand:'一宅自营',
    upeople:'阿凡达',
    status:'已上架',
    paytype:'一次付款',
    utime:'2018.02.08  10:02:02'
  }, {
    key: 2,
    weight:'1',
    sname: '手工藤编脏衣桶家居收纳筐收纳箱小号（白色筐）',
    id:"364920333332",
    mname:"家居小用品类目模板",
    brand:'一宅自营',
    upeople:'阿凡达',
    status:'已上架',
    paytype:'一次付款',
    utime:'2018.02.08  10:02:03'
  }, {
    key: 3,
    weight:'1',
    sname: '手工藤编脏衣桶家居收纳筐收纳箱小号（白色筐）',
    id:"364920333332",
    mname:"家居小用品类目模板",
    brand:'一宅自营',
    upeople:'阿凡达',
    status:'已上架',
    paytype:'一次付款',
    utime:'2018.02.08  10:02:04'
  }, {
    key: 4,
    weight:'1',
    sname: '手工藤编脏衣桶家居收纳筐收纳箱小号（白色筐）',
    id:"364920333332",
    mname:"家居小用品类目模板",
    brand:'一宅自营',
    upeople:'阿凡达',
    status:'已上架',
    paytype:'一次付款',
    utime:'2018.02.08  10:02:05'
  }, {
    key: 5,
    weight:'1',
    sname: '手工藤编脏衣桶家居收纳筐收纳箱小号（白色筐）',
    id:"364920333332",
    mname:"家居小用品类目模板",
    brand:'一宅自营',
    upeople:'阿凡达',
    status:'已上架',
    paytype:'一次付款',
    utime:'2018.02.08  10:02:06'
  }];

class Shelve extends Component{
    constructor(props){
        super(props)
        this.state={
            isshow:false,
            startValue: null,
            endValue: null,
            endOpen: false,
            keyvalue:'',
            mustaus:'',
            assostatus:'',
            paytype:0,
            brandname:'',
            muname:'',
            tagname:'',
            selenum:0,
            pagination:{
                currentpage:1,
                pageSize:2,
                totalNum:6,
            },
            batchtype:0,
            isselectAll:false,
            selectedRowKeys:[],
            sortedInfo: null,
            sortField:'',
            sortOrder:'',
            data:data


        }
        this.columns = [{
            title: '展示权重',
            dataIndex: 'weight',
            render: text =>(
                <div>
                    <Input value={text} size="small" onChange={this.onChange}/>
                </div>
            ),
            width:'72px'
          }, {
            title: '商品名称',
            dataIndex: 'id',
            defaultSortOrder: 'descend',
            sorter: (a, b) => a.id - b.id,
            width:'10%',
            render: (text,record) =><Tooltip placement="bottomLeft" title="Prompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt TextPrompt Text">{text}</Tooltip>,
          }, {
            title: '商品名称',
            dataIndex: 'sname',
          }, {
            title: '模板名称',
            dataIndex: 'mname',
          }, {
            title: '所属品牌',
            dataIndex: 'brand',
          }, {
            title: '付款类型',
            dataIndex: 'paytype',
          }, {
            title: '商品状态',
            dataIndex: 'status',
          }, {
            title: '上传人',
            dataIndex: 'upeople',
            sorter: true,
          }, {
            title: '上传时间',
            dataIndex: 'utime',
            sorter: true,
          }, {
            title: '操作',
            render:(text, record) =>(
                <div>
                    <Tag className="nomal" >查看</Tag>
                    <Tag className="bj" onClick={()=>this.fneditor(record)}>编辑</Tag>
                    <Tag className="xj" onClick={()=>this.fnshelves(record.key)}>下架</Tag>
                    <Tag className="delete" onClick={()=>this.fndelete(record.key)}>删除</Tag>
                    <Tag className="xj" onClick={()=>this.fnLog(record.key)}>日志</Tag>
                </div>
                
            )
          }];

        this.gotoThispage=this.gotoThispage.bind(this)
        this.handleInit=this.handleInit.bind(this)
    }
    //编辑
    fneditor(id){
        
    }
    //下架
    fnshelves(id){

    }
    //删除
    fndelete(key){
        console.log(key)
    }
    //日志
    fnLog(){

    }
      
    //跳转到指定页
    gotoThispage(page){
        this.setState({
            currentpage:page,
        })

    }

    //更多条件
    showmore(){
        this.setState(prevState=>({
            isshow:!prevState.isshow
        }));
    }
    //时间选择开始
    disabledStartDate = (startValue) => {
        const endValue = this.state.endValue;
        if (!startValue || !endValue) {
          return false;
        }
        return startValue.valueOf() > endValue.valueOf();
      }
      //时间选择结束时间
      disabledEndDate = (endValue) => {
        const startValue = this.state.startValue;
        if (!endValue || !startValue) {
          return false;
        }
        return endValue.valueOf() <= startValue.valueOf();
      }
      //时间改变
      onChange = (field, value) => {
        this.setState({
          [field]: value,
        });
      }
      onStartChange = (value) => {
        this.onChange('startValue', value);
      }
      onEndChange = (value) => {
        this.onChange('endValue', value);
      }
      handleStartOpenChange = (open) => {
        if (!open) {
          this.setState({ endOpen: true });
        }
      }
    
      handleEndOpenChange = (open) => {
        this.setState({ endOpen: open });
      }   
    
    itemRender(current, type, originalElement){
        return originalElement
    }
    //input 输入框
    vauleChange(e){
        this.setState({[e.target.name]:  e.target.value})
    }
    //select 输入框
    handleChange(type,value) {
        console.log(`selected ${value}`);
        this.setState({
            type:value
        })
      } 
      selectChange=(selectedRowKeys, selectedRows) => {
          console.log(selectedRowKeys)
        let arr=selectedRowKeys.join(',')
        this.setState({
          deleteArr:arr,
          selenum:selectedRowKeys.length,
          isselectAll:false
        })
        this.setState({selectedRowKeys});
        // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      };  
      //选中全部
      choseAll(){     
        this.setState({
            selenum:this.state.pagination.totalNum,
            isselectAll:true,
            selectedRowKeys:[...Array(6).keys()]
        })

      } 
      //批量操作
      handleBatch(value){
          //0 是上架 1是下架 2是删除
          this.setState({
               batchtype:value 
        })
      }
      handleSure(){

      }
      //排序
      handleInit(pagination,filters,sorter){
        const pager= { ...this.state.pagination };
        pager.currentpage = pagination.current;
        this.setState({
          pagination: pager,
          sortField:sorter.field,
          sortOrder:sorter.order
        });
        this.fetch({
            pageSize: pagination.pageSize,
            currentpage: pagination.currentpage,
            sortField: sorter.field,
            sortOrder: sorter.order,
            ...filters
        })

      }
      fetch=(params={})=>{
        const pagination = { ...this.state.pagination };
        //this.setState({ loading: true });
        // axios({

        // }).then((data)=>{
        //     this.setState({
        //         loading: false,
        //         data: data.results,
        //         pagination,
        //       });
        // })

      }
    render(){
          const {selectedRowKeys} = this.state;
          const rowSelection = {
            selectedRowKeys,
            onChange: this.selectChange
          };
        return(
            <div className="listc">
                <div className="head-title">筛选查询{this.state.pagination.totalNum}</div>
                <div className="search-list">
                    <Label name="关键字" id="key" plac="输入商品名称、编号、类目、品牌" value={this.state.keyvalue} onchange={(e)=>this.vauleChange(e)} kname="keyvalue"></Label>
                    <div className="search-li">
                        <label className="label-d">模板关联状态</label>
                        <Select defaultValue="lucy" style={{ width: 165 }} onChange={(type,value)=>this.handleChange('assostatus',value)} name="mustaus">
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>Disabled</Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </div>
                    <div className="search-li">
                        <label className="label-d">付款类型</label>
                        <Select defaultValue="微信" style={{ width: 165 }} onChange={(type,value)=>this.handleChange('paytype',value)}>
                            <Option value="微信">微信</Option>
                            <Option value="支付宝">支付宝</Option>
                            <Option value="一次付款">一次付款</Option>
                        </Select>
                    </div>
                    <div className="search-li">
                        <Checkbox>包邮</Checkbox>
                        <Checkbox>推荐</Checkbox>
                    </div>
                    <Button type="" icon="search" className="nomal new-btn">搜索</Button>
                    <Button type="" >重置</Button>
                    <Button className="screen"  onClick={()=>this.showmore()}>综合筛选<Icon type="double-right"/></Button>
                </div>
                <div className={this.state.isshow?"search-list vshow":'search-list vhide'}>
                    <Label name="品牌名称" id="key" value={this.state.brandname} onchange={(e)=>this.vauleChange(e)} kname="brandname"></Label>
                    <Label name="模板名称" id="mb-name" value={this.state.muname} onchange={(e)=>this.vauleChange(e)} kname="muname"></Label>
                    <Label name="属性标签" id="mb-name" value={this.state.tagname} onchange={(e)=>this.vauleChange(e)} kname="tagname"></Label>
                    <div className="search-li">
                        <label className="create-time">创建时间</label>
                        <DatePicker
                            disabledDate={this.disabledStartDate}
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            value={this.state.startValue}
                            placeholder="开始时间"
                            onChange={this.onStartChange}
                            onOpenChange={this.handleStartOpenChange}
                            locale={locale}
                        />
                        <span className="line"></span>
                        <DatePicker
                        disabledDate={this.disabledEndDate}
                        showTime
                        format="YYYY-MM-DD HH:mm:ss"
                        value={this.state.endValue}
                        placeholder="结束时间"
                        onChange={this.onEndChange}
                        open={this.state.endOpen}
                        onOpenChange={this.handleEndOpenChange}
                        locale={locale}
                        
                        />
                    </div>
                </div>
                <div className="table">
                    <div className='title'>
                        <div>共筛选出数据：
                            <span className="se-num">
                                598 
                            </span>
                            条
                        </div>
                        <div>
                            <Button type="" className="dh-btn">导出数据</Button>
                            <Button type="primary" className="nomal new-btn"><Link to="/addstep01">新建商品</Link></Button>
                        </div>
                    </div>
                    <Ntable rowSelection={rowSelection} columns={this.columns}  dataSource={data} onChange={this.handleInit}  selenum={this.state.selenum} pagination={{
                    defaultCurrent:1,
                    total:this.state.pagination.totalNum,
                    pageSize:this.state.pagination.pageSize,
                    current:this.state.pagination.currentpage,
                    onChange:this.gotoThispage, 
                    showTotal(total) {  //设置显示一共几条数据
                        return '共 ' + total+ ' 条数据'; 
                    },
                     showQuickJumper:true,
                    // itemRender(current, type, originalElement){
                    //     if (type === 'prev') {
                    //         return + '共 ' + 200 + ' 条数据'+<a>55</a>;
                    //       } else if (type === 'next') {
                    //         return <a>></a>;
                    //       }
                    //     return originalElement
                    // }
            
                    }} loading={this.state.loading} click={()=>this.choseAll()} handleBatch={()=>this.handleBatch()} handleSure={this.handleSure}/>
                </div>
            </div>
        )
    }
}
export default Shelve